<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <th:block th:include="include :: header('角色管理')"/>
    <th:block th:include="include :: dtree_css"/>
</head>
<body class="x-admin-sm">
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="">首页</a>
            <a>
              <cite>角色管理</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="username" placeholder="请输入用户名" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="sreach"><i
                                    class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div>
                    <table id="treeTableMenu" lay-filter="tb_menu_filter"></table>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/html" id="toolBarMenu">
    <div class="layui-card-header">
        <!--        <button class="layui-btn layui-btn-danger" lay-event="delAll"><i class="layui-icon"></i>批量删除</button>-->
        <button id="btnAddRole" class="layui-btn" lay-event="addMenu"><i class="layui-icon"></i>添加</button>
    </div>
</script>
</body>
<script th:inline="javascript"> var ctx = [[@{/}]] </script>
<th:block th:include="include :: dtree_js"/>
<th:block th:include="include :: treetable-js"/>
<script>

    layui.use(['laydate', 'form', 'table', 'treeGrid'], function () {
        let laydate = layui.laydate;
        let form = layui.form;
        let table = layui.table;
        let treeTable = layui.treeTable;
        let treeGrid = layui.treeGrid;//很重要
        let $ = layui.jquery;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        var ptable = treeGrid.render({
            elem: '#treeTableMenu'
            , idField: 'id'
            , url: '/system/menu/list'
            , cellMinWidth: 100
            , treeId: 'menuId'//树形id字段名称
            , treeUpId: 'parentId'//树形父id字段名称
            , treeShowName: 'menuName'//以树形式显示的字段
            , isFilter: false
            , iconOpen: true//是否显示图标【默认显示】
            , isOpenDefault: false//节点默认是展开还是折叠【默认展开】
            , loading: true
            , toolbar: '#toolBarMenu'
            , method: 'post'
            , page: {
                groups: 3,
                layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
            }
            , cols: [
                [

                    {
                    fixed: 'left', width: 240, title: '操作', align: 'center'/*toolbar: '#barDemo'*/
                    , templet: function (d) {
                        let html = '';
                        let editBtn = '<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit">编辑</a>';
                        let addBtn = '<a class="layui-btn layui-btn-container layui-btn-xs" lay-event="add">添加下级菜单</a>';
                        let delBtn = '<a class="layui-btn  layui-btn-danger layui-btn-xs" lay-event="del">删除</a>';
                        return editBtn + delBtn + addBtn;
                    }
                }
                    , {field: 'menuName', width: 200, title: '菜单名称'}
                    , {field: 'url', width: 120, title: '请求地址'}
                    , {field: 'menuType', width: 80, title: '菜单类型'}
                    , {field: 'orderNum', width: 80, title: '显示顺序'}
                    , {field: 'perms', width: 140, title: '权限表示'}
                    , {
                    field: 'createTime',
                    title: '创建时间',
                    templet: '<div>{{ layui.util.toDateString(d.createTime, "yyyy-MM-dd HH:mm:ss") }}</div>'
                }
                    , {field: 'remark', title: '备注'}

                ]
            ]
            , done: function (res, curr, count) {
                console.log(res);
            }
            , parseData: function (res) {//数据加载后回调
                return {
                    "code": res.code,
                    "count": res.total,
                    "data": res.rows,
                }
            },
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            }
        });


        treeGrid.on('tool(tb_menu_filter)', function (obj) {
            if (obj.event === 'del') {//删除行
                del(obj);
            } else if (obj.event === "add") {//添加行
                add(obj);
            } else if (obj.event == "edit") {
                edit(obj);
            }
        });

        treeGrid.on('toolbar(tb_menu_filter)', function (obj) {
            var checkStatus = treeGrid.checkStatus(obj.config.id);
            var data = checkStatus.data;
            switch (obj.event) {
                case 'delAll':
                    let menuIdDelStr = checkStatus.data.map(item => {
                        return item.menuId
                    }).join();
                    layer.msg("全部删除被调用" + menuIdDelStr);
                    delMenuByIds(menuIdDelStr);
                    break;
                case 'addMenu':
                    // layer.msg("新增被调用");
                    add(null);
                    break;
            }

        })

        function del(obj) {
            if (obj.data.children.length > 0) {
                layer.msg("存在子菜单，无法做删除操作！！请先删除子菜单");
            } else {
                layer.confirm("确定删除该菜单吗？", {icon: 2, title: '提示'}, function (index) {

                    let menuIdStr = obj.data.menuId;
                    layer.msg("确认操作！！" + menuIdStr);
                    delMenuByIds(menuIdStr);
                    treeGrid.reload('treeTableMenu');
                });
            }

        }

        function delMenuByIds(ids) {
            $.ajax({
                type: 'POST',
                url: ctx + 'system/menu/del',
                data: {menuId: ids},
                success: function (res) {
                    if (res.code == 0) {
                        layer.msg("删除操作成功");
                        ptable.reload('#treeTableMenu', {page: {curr: 1}});
                    }
                }
            });

        }

        //菜单添加 函数
        function add(obj) {
            // layer.msg(JSON.stringify(obj.data),{icon: 5});
            // console.log(obj.data.menuId);

            let _menuId;
            if (obj == null || obj == undefined || obj == "") {
                _menuId = 0;
            } else {
                _menuId = obj.data.menuId;
            }
            layer.open({
                type: 2,
                area: ['600px', '540px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '新增菜单',
                content: ctx + "system/menu/add?menuId=" + _menuId,
                success: function (layero, index) {
                    // let body=layer.getChildFrame('body',index);//少了这个是不能从父页面向子页面传值的
                    // let iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    // console.log(body.html()) //得到iframe页的body内容
                    // body.find('input').val('Hi，我是从父页来的')
                }

            });


        }


        //菜单编辑
        function edit(obj) {
            // layer.msg(JSON.stringify(obj.data),{icon: 5});
            layer.open({
                type: 2,
                area: ['600px', '540px'],
                fix: false, //不固定
                maxmin: true,
                shadeClose: true,
                shade: 0.4,
                title: '菜单编辑',
                content: ctx + "system/menu/edit?menuId=" + obj.data.menuId,
                success: function (layero, index) {
                    let body = layer.getChildFrame('body', index);//少了这个是不能从父页面向子页面传值的
                    let iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    iframeWin.layui.form.render('radio', 'radioMenuTypeFilter');
                    // console.log(body.html()) //得到iframe页的body内容
                    // body.find('input').val('Hi，我是从父页来的')
                }

            });
        }


    });
</script>
</html>